<!--
 * @author: sanbao
 * @Date: 2021-06-22 18:14:21
-->
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 50px;
  border-radius: 50%;
}
.list {
  display: flex;
  margin: 20px 0;
  .warp {
    flex: 1;
    p {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      color: #ccc;
    }
  }
}
.a {
  margin-left: 50px;
  box-sizing: border-box;
}
.w {
  display: flex;
  button {
    background-color: red;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border: none;
    padding: 1px 3px;
  }
}
</style>
<template>
  <div class="index">
    <div class="noe" v-for="(item, index) in response" :key="index">
      <div class="list">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F29%2F20200529134314_WTdiN.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664001885&t=84e27b031378bf8bda665cfaf866f700"
          alt=""
        />
        <div class="warp">
          <p>{{ item.nickname }}</p>
          <span>{{ item.text }}</span>
          <h6>🖤{{ item.digg_num }}</h6>
        </div>
        <div class="time">{{ filterTime(item.date) }}</div>
      </div>
      <div class="tow" v-for="(v, i) in item.sub_comment" :key="i">
        <div class="list a">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F29%2F20200529134314_WTdiN.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664001885&t=84e27b031378bf8bda665cfaf866f700"
            alt=""
          />
          <div class="warp">
            <div class="w">
              <p>{{ v.nickname }}</p>
              <button v-if="v.is_author == 1">作者</button>
            </div>
            <span>{{ v.text }}</span>
            <h6>❤️{{ v.digg_num }}</h6>
          </div>
          <div class="time">{{ filterTime(v.date) }}</div>
        </div>
      </div>
      <div class="asd" v-if="item.sub_comment.length > 3">加载更多。。。</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      response: [],
    };
  },
  async mounted() {
    const response = await this.$http.get(
      "http://douyin.bytedance.com/api/comment/list"
    );
    this.response = response.data.comments;
    console.log(response.data.comments);
  },
  methods: {
    filterTime(val) {
      let result;
      let timePublish = new Date(val); // 传入的时间
      let timeNow = new Date(); // 现在的时间
      let minute = 1000 * 60;
      let hour = minute * 60;
      let day = hour * 24;
      let month = day * 30;
      let year = month * 12;
      let diffValue = timeNow - timePublish; // 时间相差的值，是毫秒
      //   console.log(diffValue);
      let diffMonth = diffValue / month;
      let diffWeek = diffValue / (7 * day);
      let diffDay = diffValue / day;
      let diffHour = diffValue / hour;
      let diffMinute = diffValue / minute;
      let diffYear = diffValue / year;
      if (diffValue < minute) {
        result = "刚刚";
      } else if (diffYear > 1) {
        result = parseInt(diffYear) + "年前";
      } else if (diffMonth > 1) {
        result = parseInt(diffMonth) + "月前";
      } else if (diffWeek > 1) {
        result = parseInt(diffWeek) + "周前";
      } else if (diffDay > 1) {
        result = parseInt(diffDay) + "天前";
      } else if (diffHour > 1) {
        result = parseInt(diffHour) + "小时前";
      } else if (diffMinute > 1) {
        result = parseInt(diffMinute) + "分钟前";
      }
      return result;
    },
  },
};
</script>
